<style>
    .charts{
         height: calc(100vh - 114px);
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#first" data-toggle="tab">{:__('Transaction Overview')}</a></li>
            <li onclick="addFlow()"><a href="#second" data-toggle="tab">{:__('Traffic Overview')}</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="first">
                <iframe class="charts" src="{$report}" width="100%" height="100%" frameborder="0">

                </iframe>
            </div>

            <div class="tab-pane fade" id="second">
                
            </div>
        </div>
    </div>
</div>
<script>
    const href = '{$flow}'
    function addFlow(){
        const dom = document.getElementById('second')
        setTimeout(()=>{
           dom.innerHTML = '<iframe id="flowIframe" src="'+href+'" class="charts"  width="100%" height="100%" frameborder="0" />' 
        },200)
       
    }
</script>